<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /*  flex:1 表示什么
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。flex:1 表示 flex: 1 1 auto，它还有另外两种完整写法, 分别是 initial (0 1 auto) 和 none (0 0 auto)：
● 第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；
● 第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；
● 第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。 */
  .layout {
    display: flex;
  }

  .left {
    width: 100px;
    /* background-color: pink; */
  }

  .right {
    flex: 1;
  }

</style>

<body>
  <div class="layout">
    <div class="left">结束时间:</div>
    <div class="right">
      申请原因：慧都工业3D解决方案，其中主要包括BIM解决方案、PDM解决方案、CAE解决方案、机器人运动仿真解决方案、协同设计解决方案、3D打印解决方案。赋能企业实现数字化转型，打造享有自主知识产权的3D工程应用。</div>
  </div>
  <div class="layout">
    <div class="left">开始时间:</div>
    <div class="right">2022/03/09</div>
  </div>


  <!-- 3. display为 table-cell|table-caption|inline-block|inline-flex|flex -->
  <!-- 4. position为 absolute|fixed -->
  <style>
    /* .father {
      background-color: lightblue;
    } */
    /* 1. float: left|right 可以触发BFC(形成独立的块级作用域) */
    .left1 {
      float: left;
      width: 100px;
      background-color: red;
    }

    /* 2. overflow为 hidden|auto|scroll */
    .right1 {
      overflow: auto;
      /* background-color: lightseagreen */
    }

  </style>

  <body>
    <div class="father">
      <div class='left1'>开始时间</div>
      <div class='right1'>
        2022/03/09
      </div>
      <div class='left1'>申请原因</div>
      <div class='right1'>
        要包括BIM解决方案、PDM解决方案、CAE解决方案、机器人运动仿真解决方案、协同设计解决方案、3D打印解决方案。要包括BIM解决方案、PDM解决方案、CAE解决方案、机器人运动仿真解决方案、协同设计解决方案、3D打印解决方案。要包括BIM解决方案、PDM解决方案、CAE解决方案、机器人运动仿真解决方案、协同设计解决方案、3D打印解决方案。要包括BIM解决方案、PDM解决方案、CAE解决方案、机器人运动仿真解决方案、协同设计解决方案、3D打印解决方案。
      </div>
    </div>
  </body>
</body>

</html>
